const editGroupTemplate =
`
<el-dialog
        :title="group.id ? '修改Group' : '新增Group'"
        :visible.sync="visible"
        width="420px">
    <div style="display: flex; align-items: center; justify-content: space-between;">
        <span>Name</span>
        <el-input style="max-width: 300px;" v-model="group.name"></el-input>
    </div>
    <div style="display: flex; align-items: center; justify-content: space-between;">
        <span>Cash</span>
        <el-input style="max-width: 300px;" v-model="group.cash"></el-input>
    </div>
    <p v-if="group.createTimeStr"><span>CreateTime</span><span class="float-right">{{group.createTimeStr}}</span></p>
    <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="updateGroup">确 定</el-button>
    </span>
</el-dialog>
`

Vue.component('edit-group', {
    props: {
        groupInfo: Object,
        closeDialog: Function,
        visible: Boolean,
        userId: Number
    },
    data: function () {
        return {
            group: this.groupInfo || {}
        }
    },
    watch: {
        visible: function (val) {
            if (val) {
                this.group = { ...this.groupInfo }
            }
        }
    },
    methods: {
        updateGroup: async function () {
            let url = '/api/group?'
            if (this.group.id) {
                url = url + `groupId=${this.group.id}`
            } else {
                url = url + `userId=${this.userId}`
            }
            if (this.group.name) {
                url = url + `&groupName=${this.group.name}`
            }
            if (this.group.name) {
                url = url + `&cash=${this.group.cash}`
            }
            const res = await axios.post(url);
            if (res.status === 200) {
                this.closeDialog()
            }
        }
    },
    template: editGroupTemplate
})
